/**
* @file  index
* @author xiao_xie
* @date 2025-03-13
*/

import React from 'react';
import { Flex } from "antd";
import MaterialArea from "./MaterialArea";
import AttrbuitesArea from "./AttrbuitesArea";
import Header from '../../../components/Header';
import ComponentArea from './ComponentArea';

const Index: React.FC = () => {
  const [isExpanded, setIsExpanded] = React.useState(false);

  return (
    <Flex vertical style={{ width: "100%", height: "100vh" }}>
      <Header />
      
      <div 
        className="flex flex-1 overflow-hidden relative"
      >
        {/* 左侧面板 */}
        <div
          className={`h-full bg-white transition-[width] duration-300  px-1 ${
            isExpanded ? "w-[350px]" : "w-[80px]"
          }`}
        >
          <MaterialArea 
            isExpanded={isExpanded}
            onToggle={(value:boolean) => setIsExpanded(value)}
          />
        </div>

        {/* 中间内容区域 */}
        <div className="flex-1 bg-[#ccc] overflow-auto">
          <ComponentArea />
        </div>

        {/* 右侧属性面板 */}
        <div className="w-[300px] bg-white border-l overflow-auto px-1">
          <AttrbuitesArea />
        </div>
      </div>
    </Flex>
  );
};

export default Index;
